<template>
  <div class="app-container">
    <!-- 条件查询 v-permission="'role:search'" -->
    <el-card class="box-card">
      <el-form :inline="true" :model="query" size="mini">
        <el-form-item label="角色名称：">
          <el-input v-model.trim="query.name"/>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
          <!-- roleIds 如果有值，则是用户管理组件传递过来了，则隐藏新增按钮 v-permission="'role:add'" -->
          <el-button v-permission="'role:add'" v-if="!roleIds" icon="el-icon-circle-plus-outline" type="success" @click="openAdd">新增
          </el-button>
          <!-- roleIds 有值才显示 -->
          <el-button
            v-permission="'role:permission'"
            v-if="roleIds"
            icon="el-icon-circle-plus-outline"
            type="primary"
            @click="handleUserRole"
          >设置角色
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 角色列表-->
    <!-- @selection-change="handleSelectionChange" 保存勾选的选项方法 -->
    <el-table
      ref="dataTable"
      :data="list"
      stripe
      border
      style="width: 100%"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选 -->
      <!-- reserve-selection 必须配合上面的 row-key 使用，这样可以在切换页码后，保留前面选中的行 -->
      <el-table-column align="center" reserve-selection type="selection" width="55"/>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          <!--  page.current 当前页码；page.size 每页记录数 -->
          {{ (current - 1) * size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="角色名称"/>
      <el-table-column align="center" prop="remark" label="备注"/>
      <!--roleIds如果有值，则是用户管理组件传递过来了，则把操作列隐藏  -->
      <el-table-column v-if="!roleIds" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-permission="'role:permission'" type="success" size="mini" @click="handlePermission(scope.row.id)">分配权限</el-button>
          <el-button v-permission="'role:edit'" type="primary" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button v-permission="'role:delete'" type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      align="center"
      background
      :current-page="current"
      :page-sizes="[10, 20,30,50,100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 子组件: 新增或编辑 -->
    <edit
      :title="edit.title"
      :visible="edit.visible"
      :form-data="edit.formData"
      :remote-close="remoteClose"
    />
    <!-- 子组件: 分配权限-->
    <permission
      title="分配权限"
      :visible="per.visible"
      :role-id="per.roleId"
      :name="per.name"
      @remotePerClose="remotePerClose"
    />
  </div>
</template>
<script>
import api from '@/api/role'
import Edit from './edit'
import Permission from './permission'

export default {
  name: 'Role',
  components: {
    Edit,
    Permission
  },
  props: ['roleIds', 'roleVisible'],
  data() {
    return {
      list: [],
      current: 1,
      size: 10,
      total: 0,
      query: {},
      // 新增或编辑数据对象
      edit: {
        title: '',
        visible: false,
        formData: {}
      },
      // 声明传递给分配权限子组件的属性
      per: {
        visible: false,
        roleId: null, // 将获取到的 角色id 传给子组件
        name: ''
      },
      // 存储选中的角色对象（勾选）
      checkedRoleList: [],
      id: ''
    }
  },
  watch: {
    // 监听用户列表点击[分配权限]按钮打开对话框的值，刷新角色列表数据
    roleVisible() {
      this.query = {} // 将查询条件清空
      this.queryData() // 重新获取数据，注意这个方法是查询第 1 页
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取列表数据
    async fetchData() {
      const { data } = await api.getList(this.query, this.current, this.size)
      this.list = data.role.records
      this.total = data.role.total
      // 列表有数据后，勾选角色（分配角色用）
      this.checkedRoles()
    },
    // 列表有数据后，勾选角色（分配角色用） ref="dataTable"
    checkedRoles() {
      // 清空上一次选择
      this.$refs.dataTable.clearSelection()
      if (this.roleIds) {
        // 循环出查询到的每个角色数据
        this.list.forEach(item => {
          // 用户所拥有的 roleIds 跟数组中的一致，即存在，就勾选
          // 匹配到了，则应该选中（id 存在就不会返回 -1）
          if (this.roleIds.indexOf(item.id) !== -1) {
            // 选中，传的是对象
            this.$refs.dataTable.toggleRowSelection(item, true) // true 选中，false 不选中
          }
        })
      } else {
        this.$refs.dataTable.clearSelection()
      }
    },
    // 切换每页显示记录数
    handleSizeChange(size) {
      this.size = size
      this.fetchData()
    },
    // 切换分页
    handleCurrentChange(current) {
      this.current = current
      this.fetchData()
    },
    // 条件查询
    queryData() {
      this.current = 1
      this.fetchData()
    },
    // 重置表单
    reload() {
      this.query = {}
      this.fetchData()
    },
    // 打开新增对话框
    openAdd() {
      this.edit.visible = true
      this.edit.title = '新增角色'
    },
    // 关闭新增或编辑窗口
    remoteClose() {
      this.edit.formData = {}
      this.edit.visible = false
      this.fetchData()
    },
    // 根据id查询角色详情
    async handleEdit(id) {
      const response = await api.getById(id)
      this.edit.formData = response.data.role
      this.edit.visible = true
      this.edit.title = '编辑角色'
    },
    // 删除角色
    handleDelete(id) {
      this.$confirm('确定要删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        api.deleteById(id).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message.success(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    // 关闭分配权限弹窗
    remotePerClose() {
      this.per.visible = false
      this.per.roleId = null
      this.fetchData()
    },
    // 分配权限菜单
    // 点击分配权限按钮，打开弹窗，传角色id 给分配权限子组件
    handlePermission(id, name) {
      this.per.roleId = id
      this.per.name = name
      this.per.visible = true
    },
    // 收集被选中的角色（保存勾选的角色）框架方法
    handleSelectionChange(val) {
      // val 是选中的每个角色对象，将选中的每个对象封装到 checkedRoleList 数组中
      this.checkedRoleList = val
    },
    // 点击 设置角色 按钮触发的方法
    handleUserRole() {
      // 存放选中的角色 id
      const checkedRoleIds = []
      // 遍历上面 handleSelectionChange 方法选中的每个角色对象，取出id属性，存入到 id 数组中
      this.checkedRoleList.forEach(item => {
        checkedRoleIds.push(item.id)
      })
      // 触发父组件方法，把选中的角色id传过去，让父组件方法保存这些选中的角色 ids
      this.$emit('saveUserRole', checkedRoleIds)
    }
  }
}
</script>
<style scoped>
.el-pagination {
  margin: 20px 0 50px;
}
</style>
